<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Reset password</title>

    <!-- CSS -->
    <link rel="stylesheet" th:href="@{assets/material/material.blue_grey-blue.min.css}">
    <link rel="stylesheet" th:href="@{assets/material/material.icons.css}">
    <link rel="stylesheet" th:href="@{assets/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{assets/css/reset_password.css}">
    <link rel="stylesheet" th:href="@{assets/css/password_validation.css}">

    <!-- Favicon and touch icons -->
    <link rel="shortcut icon" th:href="@{assets/ico/favicon.ico}">
</head>

<body>
<div class="mdl-layout mdl-js-layout">
    <div class="reset-password-container">
        <div th:if="${error == null && success == null}" class="reset-password-form">
            <div class="reset-password-form-title">
                <label>Reset password</label>
                <span>Please enter a new password for your account</span>
            </div>


            <form role="form" th:action="${action}" method="post">
                <div class="reset-password-form-content">
                    <div class="input-textfield">
                        <label for="password">Password</label>
                        <i id="changePasswordVisibility" class="mdl-textfield__icon material-icons"
                           style="position: absolute; margin-top: 27px; margin-left: 5px;">visibility</i>
                        <input type="password" id="password" name="password" required style="padding-left: 30px;"/>
                    </div>
                    <div th:if="${passwordSettings != null}" id="passwordSettings">
                        <span>Password policy :</span>
                        <p th:if="${passwordSettings.minLength != null}" id="minLength" class="invalid">Contains at least <span th:text="${passwordSettings.minLength}"/> characters</p>
                        <p th:if="${passwordSettings.includeNumbers}" id="includeNumbers" class="invalid">Contains a number</p>
                        <p th:if="${passwordSettings.includeSpecialCharacters}" id="includeSpecialChar" class="invalid">Contains a special character</p>
                        <p th:if="${passwordSettings.lettersInMixedCase}" id="mixedCase" class="invalid">Contains letters in mixed case</p>
                        <p th:if="${passwordSettings.maxConsecutiveLetters != null}" id="maxConsecutiveLetters" class="valid">Max <span th:text="${passwordSettings.maxConsecutiveLetters}"/> consecutive letters or numbers</p>
                        <p th:if="${passwordSettings.excludePasswordsInDictionary}" id="excludePasswordsInDictionary" class="advice">don't use common names or passwords</p>
                    </div>
                </div>

                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                <input type="hidden" name="token" id="token" th:value="${token}"/>
                <div class="reset-password-form-actions">
                    <button type="submit" id="submitBtn"
                            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                        Reset password
                    </button>
                </div>
            </form>
        </div>

        <div th:if="${success}" class="reset-password-form">
            <div class="reset-password-form-title">
                <label>Reset password confirmation</label>
                <p>Your password has been changed. Go back to your application to login</p>
            </div>
        </div>

        <div th:if="${error}" class="reset-password-form">
            <div class="reset-password-form-title">
                <label>Reset password error</label>
                <p>Please go back to your client application and try again, or contact the owner and ask for support</p>
            </div>
            <div class="reset-password-error-info">
                Error description : <span th:text="*{error_description}?: ${error}" class="error"></span>
            </div>
        </div>
    </div>
</div>

<!--[if lt IE 10]>
<script th:src="@{assets/js/placeholder.js}"></script>
<![endif]-->
<script th:src="@{assets/material/material.min.js}"></script>
<script th:src="@{assets/js/jquery-3.5.1.min.js}"></script>
<script th:inline="javascript">
    $(".mdl-textfield__input").focus(function () {
        if (!this.value) {
            $(this).prop('required', true);
            $(this).parent().addClass('is-invalid');
        }
    });
    $(".mdl-button[type='submit']").click(function (event) {
        $(this).siblings(".mdl-textfield").addClass('is-invalid');
        $(this).siblings(".mdl-textfield").children(".mdl-textfield__input").prop('required', true);
    });
    $("#changePasswordVisibility").click(function () {
        var inputType = $('input#password').attr('type');
        if (inputType === 'text') {
            $('input#password').prop('type', 'password');
            $(this).text('visibility');
        } else {
            $('input#password').prop('type', 'text');
            $(this).text('visibility_off');
        }
    });
    /*[# th:if="${passwordSettings != null}"]*/
    submitBtn.disabled = true;
    /*[/]*/
    const passwordSettings = /*[[${passwordSettings}]]*/ null;
</script>
<script th:src="@{assets/js/password-validation.js}"></script>
</body>
</html>
